<template>
	<div>
		<div :style='{ "padding": "20px 7%", "margin": "0px auto", "borderColor": "#ddd", "borderRadius": "0px", "background": "none", "borderWidth": "0 0 1px", "width": "100%", "borderStyle": "solid" }'
			class="breadcrumb-preview">
			<el-breadcrumb :separator="'Ξ'" :style='{ "fontSize": "14px", "lineHeight": "1" }'>
				<el-breadcrumb-item class="item1" to="/"><a>首页</a></el-breadcrumb-item>
				<el-breadcrumb-item class="item2" v-for="(item, index) in breadcrumbItem" :key="index"><a>{{ item.name
				}}</a></el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div v-if="centerType"
			:style='{ "padding": "20px 7%", "margin": "0px auto", "borderColor": "#ddd", "borderRadius": "0px", "background": "none", "borderWidth": "0 0 1px", "width": "100%", "borderStyle": "solid" }'>
			<el-button size="mini" @click="backClick" icon="el-icon-back" type="warning">返回</el-button>
		</div>

		<!-- 搜索表单 -->
		<el-form :model="formSearch" class="search-form-container">
			<div class="search-form-wrapper" style="display: block;">
				<div class="search-row">
					<el-form-item class="search-form-item">
						<el-input v-model="formSearch.title" placeholder="请输入课程名称" @keydown.enter.native="getList(1)"
							clearable prefix-icon="el-icon-search" class="search-input"></el-input>
					</el-form-item>

					<el-button type="primary" @click="getList(1)" class="search-btn">
						<i class="el-icon-search"></i>搜索
					</el-button>

					<el-button v-if="btnAuth('course', '新增')" type="success" @click="add('/index/courseAdd')"
						class="add-btn">
						<i class="el-icon-circle-plus-outline"></i>添加课程
					</el-button>
				</div>
			</div>
		</el-form>

		<!-- 筛选条件 -->
		<div class="filter-container" style="margin-top: 15px;">
			<div class="filter-item" v-for="(item, index) in selectOptionsList" :key="index">
				<div class="filter-label">{{ item.name }}：</div>
				<div class="filter-options">
					<div class="filter-option" @click="selectClick2(item, -1)" :class="{ active: item.check == -1 }">
						全部</div>
					<div class="filter-option" @click="selectClick2(item, index1)"
						:class="{ active: item.check == index1 }" v-for="(item1, index1) in item.list" :key="item1">{{
							item1 }}</div>
				</div>
			</div>
		</div>
		<div class="main-container" style="margin-top: 15px; position: relative;">
			<div class="sort-container" style="position: absolute; right: 0; top: 0; z-index: 1;">
				<el-button @click="sortClick('clicknum')" class="sort-btn">
					<span class="sort-icon" :class="{
						'iconfont': true,
						'icon-xiaoliang13': true,
						'active': sortType === 'clicknum',
						'desc': sortType === 'clicknum' && sortOrder === 'desc',
						'asc': sortType === 'clicknum' && sortOrder === 'asc'
					}"></span>
					<span class="sort-text">点击量</span>
				</el-button>
			</div>
			<div class="list"
				:style='{ "width": "100%", "padding": "40px 7% 0", "margin": "10px auto", "background": "#fff", "order": "4", "box-sizing": "border-box" }'>

				<!-- 样式三 -->
				<div class="list3 index-pv1"
					:style='{ "padding": "0 0px", "overflow": "hidden", "flexWrap": "wrap", "background": "#fff", "display": "flex", "width": "100%", "clear": "both", "justifyContent": "space-between", "height": "auto" }'>
					<div v-for="(item, index) in dataList" :key="index" @click.stop="toDetail(item)"
						class="list-item animation-box">
						<div :style='{ "border": "1px solid #f6f6f6", "width": "200px", "padding": "0px", "margin": "0 10px 0 0", "overflow": "hidden", "height": "200px" }'
							class="img-box">
							<img @click.stop="imgPreView(item.coverImageUrl)"
								:style='{ "width": "100%", "objectFit": "cover", "display": "block", "height": "100%" }'
								v-if="item.coverImageUrl && item.coverImageUrl.substr(0, 4) == 'http'"
								:src="item.coverImageUrl.split(',')[0]" class="image" />
							<img @click.stop="imgPreView(baseUrl + (item.coverImageUrl ? item.coverImageUrl.split(',')[0] : ''))"
								:style='{ "width": "100%", "objectFit": "cover", "display": "block", "height": "100%" }'
								v-else :src="baseUrl + (item.coverImageUrl ? item.coverImageUrl.split(',')[0] : '')"
								class="image" />
						</div>
						<div :style='{ "width": "200px", "padding": "0 10px", "overflow": "hidden", "flex": "1", "display": "flex", "height": "auto" }'
							class="item-info">
							<div
								:style='{ "width": "300px", "padding": "0", "alignItems": "center", "flexWrap": "wrap", "flex": "1", "display": "flex" }'>
								<div class="title">{{ item.title }}</div>
								<div class="title">{{ item.courseType }}</div>
								<div :style='{ "width": "100%", "padding": "2px 10px", "borderColor": "#f0f0f0", "borderStyle": "dashed", "borderWidth": "0 0 1px 0", "display": "none" }'
									class="time">
									<span class="icon iconfont icon-shijian21"></span>
									<span class="text">{{ item.addtime }}</span>
								</div>
								<div :style='{ "padding": "2px 10px", "borderColor": "#eee", "borderStyle": "dashed", "borderWidth": "0 0 1px 0" }'
									class="like">
									<span class="icon iconfont icon-zan10"></span>
									<span class="text">{{ item.thumbsUpNum }}</span>
								</div>
								<div :style='{ "padding": "2px 10px", "borderColor": "#eee", "borderStyle": "dashed", "borderWidth": "0 0 1px 0" }'
									class="collect">
									<span class="icon iconfont icon-shoucang10"></span>
									<span class="text">{{ item.storeupnum }}</span>
								</div>
								<div :style='{ "padding": "2px 10px", "borderColor": "#f0f0f0", "borderStyle": "dashed", "borderWidth": "0 0 1px 0" }'
									class="view">
									<span class="icon iconfont icon-chakan9"></span>
									<span class="text">{{ item.clickNum }}</span>
								</div>
							</div>
							<div class="desc" v-html="item.description"></div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<el-pagination background id="pagination" class="pagination" :pager-count="7" :page-size="pageSize"
			:page-sizes="pageSizes" prev-text="<" next-text=">" :hide-on-single-page="false"
			:layout='["total", "prev", "pager", "next", "sizes", "jumper"].join()' :total="total"
			:style='{ "padding": "0 7%", "margin": "10px auto", "whiteSpace": "nowrap", "overflow": "hidden", "color": "#333", "textAlign": "center", "width": "100%", "clear": "both", "fontWeight": "500", "order": "50" }'
			@current-change="curChange" @size-change="sizeChange" @prev-click="prevClick"
			@next-click="nextClick"></el-pagination>


		<el-dialog title="预览图" :visible.sync="previewVisible" width="50%">
			<img :src="previewImg" alt="" style="width: 100%;">
		</el-dialog>
	</div>
</template>



<script>
export default {
	//数据集合
	data() {
		return {
			selectIndex2: 0,
			selectOptionsList: [],
			layouts: '',
			swiperIndex: -1,
			baseUrl: '',
			breadcrumbItem: [
				{
					name: '课程信息'
				}
			],
			formSearch: {
				title: '',
				courseType: '',
				kechengkeshi: '',
			},
			fenlei: [],
			feileiColumn: '',
			dataList: [],
			total: 1,
			pageSize: 10,
			pageSizes: [10, 20, 30, 50],
			totalPage: 1,
			curType: '全部',
			isPlain: false,
			indexQueryCondition: '',
			courseTypeOptions: [],
			timeRange: [],
			centerType: false,
			previewImg: '',
			previewVisible: false,
			sortType: 'course_grading',
			sortOrder: 'desc',
			currentPage:1,
		}
	},
	created() {
		if (this.$route.query.centerType) {
			this.centerType = true
		}
		this.baseUrl = this.$config.baseUrl;
		this.$http.get('common/option/course_type/course_type').then(res => {
			if (res.data.code == 0) {
				this.courseTypeOptions = res.data.data;
				this.selectOptionsList.push({ name: '课程类型', list: this.courseTypeOptions, tableName: 'courseType', check: -1 })
			}
		});
		this.getList(1);
	},
	//方法集合
	methods: {
		selectClick2(row, index) {
			row.check = index
			if (index == -1) {
				this.formSearch[row.tableName] = ''
			} else {
				this.formSearch[row.tableName] = row.list[index]
			}
			this.getList()
		},
		add(path) {
			let query = {}
			if (this.centerType) {
				query.centerType = 1
			}
			this.$router.push({ path: path, query: query });
		},
		getList(page) {
			this.currentPage = page;
			let params = { page, limit: this.pageSize };
			let searchWhere = {};
			if (this.formSearch.title != '')
				searchWhere.title = '%' + this.formSearch.title + '%';
			if (this.formSearch.courseType != '')
				searchWhere.courseType = this.formSearch.courseType;

			let user = JSON.parse(localStorage.getItem('sessionForm'))
			if (this.sortType)
				searchWhere.sort = this.sortType
			if (this.sortOrder)
				searchWhere.order = this.sortOrder

			this.$http.get(`course/${this.centerType ? 'page' : 'list'}`, { params: Object.assign(params, searchWhere) }).then(res => {
				if (res.data.code == 0) {
					this.dataList = res.data.data.list;
					this.total = Number(res.data.data.total);
					this.pageSize = Number(res.data.data.pageSize);
				}
			});
		},
		sortClick(type) {
			if (this.sortType == type) {
				if (this.sortOrder == 'desc') {
					this.sortOrder = 'asc'
				} else {
					this.sortOrder = 'desc'
				}
			} else {
				this.sortType = type
				this.sortOrder = 'desc'
			}
			this.getList(1)
		},
		curChange(page) {
			this.getList(page);
		},
		prevClick(page) {
			this.getList(page);
		},
		sizeChange(size) {
			this.pageSize = size
			this.getList(1);
		},
		nextClick(page) {
			this.getList(page);
		},
		imgPreView(url) {
			this.previewImg = url
			this.previewVisible = true
		},
		toDetail(item) {
			let params = {
				id: item.id
			}
			if (this.centerType) {
				params.centerType = 1
			}
			this.$router.push({ path: '/index/courseDetail', query: params });
		},
		btnAuth(tableName, key) {
			if (this.centerType) {
				return this.isBackAuth(tableName, key)
			} else {
				return this.isAuth(tableName, key)
			}
		},
		backClick() {
			this.$router.push({ path: '/index/center' });
		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.search-form-container {
	padding: 20px 7%;
	margin: 20px 0 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
	//max-width: 1000px;
	margin-left: 140px;
	margin-right: 140px;

	.search-form-wrapper {
		display: block;
		align-items: center;
		flex-wrap: wrap;
		gap: 15px;

		.search-row {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 15px;
			margin-bottom: 15px; // 添加底部间距
		}

		.search-form-item {
			margin: 0;

			.search-input {
				width: 220px;

				/deep/ .el-input__inner {
					border-radius: 20px;
					height: 40px;
					line-height: 40px;
					border: 1px solid #dcdfe6;
					transition: all 0.3s;

					&:focus {
						border-color: #F5BB00;
						box-shadow: 0 0 0 2px rgba(245, 187, 0, 0.2);
					}
				}
			}
		}

		.search-btn {
			height: 40px;
			padding: 0 20px;
			background: linear-gradient(135deg, #F5BB00, #FFD700);
			border: none;
			border-radius: 20px;
			color: #fff;
			font-weight: 500;
			transition: all 0.3s;

			&:hover {
				opacity: 0.9;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(245, 187, 0, 0.3);
			}

			i {
				margin-right: 5px;
			}
		}

		.add-btn {
			height: 40px;
			padding: 0 20px;
			background: linear-gradient(135deg, #67C23A, #85CE61);
			border: none;
			border-radius: 20px;
			color: #fff;
			font-weight: 500;
			transition: all 0.3s;

			&:hover {
				opacity: 0.9;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
			}

			i {
				margin-right: 5px;
			}
		}
	}
}

.filter-container {
	padding: 0 7%;
	margin: 10px 0 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
	margin-top: 15px;
	display: block;
	/* 确保是块级元素 */
	//max-width: 1000px;
	margin-left: 140px;
	margin-right: 140px;

	.filter-item {
		padding: 12px 0;
		display: flex;
		align-items: center;
		border-bottom: 1px dashed #eee;

		&:last-child {
			border-bottom: none;
		}

		.filter-label {
			width: 100px;
			text-align: right;
			color: #606266;
			font-size: 14px;
			padding-right: 12px;
			flex-shrink: 0;
		}

		.filter-options {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;

			.filter-option {
				padding: 6px 16px;
				font-size: 14px;
				color: #606266;
				background: #f5f7fa;
				border-radius: 4px;
				cursor: pointer;
				transition: all 0.3s;

				&:hover {
					color: #F5BB00;
					background: #fdf6ec;
				}

				&.active {
					color: #fff;
					background: #F5BB00;
					font-weight: 500;
				}
			}
		}
	}
}


.main-container {
	padding: 0 7%;
	margin: 10px 140px 140px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
	margin-top: 15px;
	display: block;
	/* 确保是块级元素 */

}

.sort-container {
	padding: 0 7%;
	margin: 20px auto 10px;
	text-align: right;

	.sort-btn {
		border: none;
		background: transparent;
		padding: 0 15px;
		color: #606266;
		font-size: 14px;
		transition: all 0.3s;

		&:hover {
			color: #F5BB00;
		}

		.sort-icon {
			margin-right: 5px;
			color: #c0c4cc;
			transition: all 0.3s;

			&.active {
				color: #F5BB00;
			}

			&.desc {
				color: #F5BB00;
			}

			&.asc {
				color: #F5BB00;
				transform: rotate(180deg);
			}
		}

		.sort-text {
			vertical-align: middle;
		}
	}
}

.list-preview .list-form-pv .el-input {
	width: auto;
}

.breadcrumb-preview .el-breadcrumb /deep/ .el-breadcrumb__separator {
	margin: 0 9px;
	color: #ccc;
	font-weight: 500;
}

.breadcrumb-preview .el-breadcrumb .item1 /deep/ .el-breadcrumb__inner a {
	color: #333;
	display: inline-block;
}

.breadcrumb-preview .el-breadcrumb .item2 /deep/ .el-breadcrumb__inner a {
	color: #666;
	display: inline-block;
}

.category-1 .item {
	cursor: pointer;
	border-radius: 0px;
	padding: 0 20px;
	margin: 0 10px 10px;
	color: #fff;
	background: #333;
	width: auto;
	font-size: 16px;
	line-height: 44px;
	text-align: center;
}

.category-1 .item:hover {
	cursor: pointer;
	margin: 0 10px 10px;
	color: #fff;
	background: #F5BB00;
	width: auto;
	font-size: 16px;
	line-height: 44px;
	text-align: center;
}

.category-1 .item.active {
	border-radius: 0px;
	margin: 0 10px 10px;
	color: #fff;
	background: #F5BB00;
	width: auto;
	font-size: 16px;
	line-height: 44px;
}

.category-2 .item {
	cursor: pointer;
	border-radius: 4px;
	margin: 0 0 10px 0;
	color: #999;
	background: #efefef;
	width: 100%;
	font-size: 14px;
	line-height: 36px;
	text-align: center;
}

.category-2 .item:hover {
	cursor: pointer;
	border-radius: 4px;
	margin: 0 0 10px 0;
	color: #999;
	background: #efefef;
	width: 100%;
	font-size: 14px;
	line-height: 36px;
	text-align: center;
}

.category-2 .item.active {
	cursor: pointer;
	border-radius: 4px;
	margin: 0 0 10px 0;
	color: #999;
	background: #efefef;
	width: 100%;
	font-size: 14px;
	line-height: 36px;
	text-align: center;
}

.category-3 .item {
	cursor: pointer;
	padding: 0;
	margin: 0 0 26px;
	color: #333;
	display: flex;
	border-color: #ddd;
	line-height: 30px;
	flex-wrap: wrap;
	border-radius: 0px;
	background: none;
	width: 15%;
	justify-content: center;
	border-width: 0 1px 0 0;
	align-items: center;
	border-style: solid;
	text-align: center;
	height: 80px;
}

.category-3 .item:hover {
	border-radius: 0;
	padding: 0;
	color: #333;
	background: none;
	width: 15%;
	line-height: 30px;
}

.category-3 .item.active {
	border-radius: 0;
	padding: 0;
	color: #333;
	background: none;
	width: 15%;
	line-height: 30px;
}

.list-form-pv .el-input /deep/ .el-input__inner {
	border: 1px solid #ddd;
	border-radius: 0px;
	padding: 0 10px;
	margin: 0;
	outline: none;
	color: #333;
	width: auto;
	font-size: 14px;
	line-height: 36px;
	height: 36px;
}

.list-form-pv .el-select /deep/ .el-input__inner {}

.list-form-pv .el-date-editor /deep/ .el-input__inner {
	border: 1px solid #ddd;
	border-radius: 0px;
	padding: 0 30px;
	margin: 0;
	outline: none;
	color: #333;
	width: auto;
	font-size: 14px;
	line-height: 36px;
	height: 36px;
}

.list .index-pv1 .animation-box {
	transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
	z-index: initial;
}

.list .index-pv1 .animation-box:hover {
	transform: rotate(0deg) scale(1.02) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
	-webkit-perspective: 1000px;
	perspective: 1000px;
	transition: 0.3s;
	z-index: 1;
}

.list .index-pv1 .animation-box img {
	transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
}

.list .index-pv1 .animation-box img:hover {
	transform: rotate(0deg) scale(1.05) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
	-webkit-perspective: 1000px;
	perspective: 1000px;
	transition: 0.3s;
}

#pagination.el-pagination /deep/ .el-pagination__total {
	margin: 0 10px 0 0;
	color: #666;
	font-weight: 400;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-prev {
	border: none;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #666;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-next {
	border: none;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #666;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-prev:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #C0C4CC;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-next:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 2px;
	padding: 0;
	margin: 0 5px;
	color: #C0C4CC;
	background: #f4f4f5;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager {
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: top;
}

#pagination.el-pagination /deep/ .el-pager .number {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: #666;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 2px;
	background: #f4f4f5;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager .number:hover {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: #fff;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 2px;
	background: #F5BB00;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager .number.active {
	cursor: default;
	padding: 0 4px;
	margin: 0 5px;
	color: #FFF;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 2px;
	background: #F5BB00;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes {
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input {
	margin: 0 5px;
	width: 100px;
	position: relative;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
	border: 1px solid #DCDFE6;
	cursor: pointer;
	padding: 0 25px 0 8px;
	color: #606266;
	display: inline-block;
	font-size: 13px;
	line-height: 28px;
	border-radius: 3px;
	outline: 0;
	background: #FFF;
	width: 100%;
	text-align: center;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
	top: 0;
	position: absolute;
	right: 0;
	height: 100%;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
	cursor: pointer;
	color: #C0C4CC;
	width: 25px;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
}

#pagination.el-pagination /deep/ .el-pagination__jump {
	margin: 0 0 0 24px;
	color: #606266;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__jump .el-input {
	border-radius: 3px;
	padding: 0 2px;
	margin: 0 2px;
	display: inline-block;
	width: 50px;
	font-size: 14px;
	line-height: 18px;
	position: relative;
	text-align: center;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
	border: 1px solid #DCDFE6;
	cursor: pointer;
	padding: 0 3px;
	color: #606266;
	display: inline-block;
	font-size: 14px;
	line-height: 28px;
	border-radius: 3px;
	outline: 0;
	background: #FFF;
	width: 100%;
	text-align: center;
	height: 28px;
}

.list3 .list-item {
	border: 1px solid #eee;
	cursor: pointer;
	padding: 10px;
	margin: 0 0 30px;
	overflow: hidden;
	background: #fff;
	display: flex;
	width: 49%;
	font-size: 0;
	align-items: center;
	position: relative;
	height: auto;
}

.list3 .list-item:hover {
	border: 1px solid #F5BB0030;
	background: #F5BB00;
}

.list3 .list-item .title {
	padding: 0 10px;
	overflow: hidden;
	color: #333;
	white-space: nowrap;
	background: none;
	width: 100%;
	font-size: 15px;
	border-color: #eee;
	border-width: 0 0 1px 0;
	line-height: 24px;
	text-overflow: ellipsis;
	border-style: dashed;
}

.list3 .list-item:hover .title {
	color: #fff;
}

.list3 .list-item .price {
	padding: 0 10px;
	color: #f00;
	width: 100%;
	font-size: 20px;
	border-color: #f0f0f0;
	border-width: 0 0 1px 0;
	line-height: 34px;
	border-style: dashed;
}

.list3 .list-item:hover .price {
	color: #fff;
}

.list3 .list-item .time .icon {
	margin: 0 4px 0 0;
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .time .icon {
	color: #fff;
}

.list3 .list-item .time .text {
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .time .text {
	color: #fff;
}

.list3 .list-item .publisher .icon {
	margin: 0 2px 0 0;
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .publisher .icon {
	color: #fff;
}

.list3 .list-item .publisher .text {
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .publisher .text {
	color: #fff;
}

.list3 .list-item .like .icon {
	margin: 0 2px 0 0;
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .like .icon {
	color: #fff;
}

.list3 .list-item .like .text {
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .like .text {
	color: #fff;
}

.list3 .list-item .collect .icon {
	margin: 0 2px 0 0;
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .collect .icon {
	color: #fff;
}

.list3 .list-item .collect .text {
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .collect .text {
	color: #fff;
}

.list3 .list-item .view .icon {
	margin: 0 2px 0 0;
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .view .icon {
	color: #fff;
}

.list3 .list-item .view .text {
	color: #999;
	font-size: 14px;
	line-height: 24px;
}

.list3 .list-item:hover .view .text {
	color: #fff;
}

.list3 .list-item .desc {
	padding: 0 0 0 20px;
	overflow: hidden;
	color: #666;
	text-indent: 2em;
	display: flex;
	width: 50%;
	font-size: 14px;
	line-height: 24px;
	align-items: center;
	height: 196px;
}

.list3 .list-item:hover .desc {
	color: #fff;
}

.select2 .list .item-body .item {
	padding: 0 5px;
	color: #666;
	display: inline-block;
	font-size: 14px;
	line-height: 32px;
}

.select2 .list .item-body .item:hover {
	color: #F5BB00;
	background: none;
}

.select2 .list .item-body .item.active {
	color: #F5BB00;
	background: none;
}
</style>
